<template>
  <div>
    <van-cell>
      <van-image
        slot="icon"
        round
        width="20"
        height="20"
        style="margin-left: 30px"
        :src="cmt.aut_photo"
      />
      <span style="color: #466b9d" slot="title">{{ cmt.aut_name }}</span>
      <div slot="label">
        <p style="color: #363636">{{ cmt.content }}</p>
        <p>
          <span style="margin-right: 10px">{{
            cmt.pubdate | relativeTime
          }}</span>
        </p>
      </div>
      <van-icon
        slot="right-icon"
        :name="cmt.is_liking ? 'like' : 'like-o'"
        :color="cmt.is_liking ? 'red' : ''"
        @click="clickZan"
      />
    </van-cell>
  </div>
</template>

<script>
import { addLike, disLike } from '@/api/comment'
export default {
  name: 'ReplayItem',
  props: {
    cmt: {
      required: true
    }
  },

  data () {
    return {}
  },

  mounted () {},

  methods: {
    async clickZan () {
      try {
        // 调用接口，发送请求为评论点赞/取消点赞
        //   如果已经点赞，则取消
        if (this.cmt.is_liking) {
          await disLike(this.cmt.com_id)
        } else {
          await addLike(this.cmt.com_id)
        }
        this.$toast.success('操作成功')
        // eslint-disable-next-line vue/no-mutating-props
        this.cmt.is_liking = !this.cmt.is_liking
      } catch (error) {
        this.$toast.fail('操作失败')
        console.log(error.message)
      }
    }
  },

  async created () {},

  beforeDestroy () {}
}
</script>

<style lang="scss" scoped>
</style>
